<template>
  <div>
    <!-- <div class="toptitle">角色列表</div> -->
    <el-form :inline="true" :model="formInline" class="demo-form-inline" @keyup.enter.native="search()">
      <el-form-item label="门店等级名称：">
        <el-input v-model="formInline.gradelevelName" placeholder style="width: 100%;"></el-input>
      </el-form-item>
      <!-- <el-form-item label="门店等级编码：">
        <el-input v-model="formInline.gradelevelCode" placeholder style="width: 100%;"></el-input>
      </el-form-item>-->
      <el-form-item>
        <el-button type="primary" @click="search()" size="mini" icon="el-icon-search">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="kong()" size="mini" icon="el-icon-delete">清空</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="add()" size="mini" icon="el-icon-edit">新增等级规则</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="tableData"
      border
      v-loading="loading"
      style="width: 100%"
      :header-cell-style="{background:'#ebecf0',color:'#606266'}"
    >
      <el-table-column type="index" width="60" label="序号" align="center"></el-table-column>
      <el-table-column prop="gradelevelName" label="门店等级名称" width="150" align="left"></el-table-column>

      <!-- <el-table-column prop="gradelevelId" label="会员等级ID"></el-table-column> -->

      <!-- <el-table-column prop="tenantId" label="租户id"></el-table-column> -->
      <!-- <el-table-column prop="gradelevelCode" label="门店等级编码" align="left"></el-table-column> -->
      <el-table-column prop="beginScore" label="开始分值" align="right"></el-table-column>
      <el-table-column prop="endScore" label="结束分值" align="right"></el-table-column>
      <!-- <el-table-column prop="createTime" label="创建时间"></el-table-column>
      <el-table-column prop="updateTime" label="更新时间"></el-table-column>-->
      <!-- <el-table-column prop="status" label="状态" align="center">
        <template slot-scope="scope">{{scope.row.status===0?'停用':'启用'}}</template>
      </el-table-column>-->
      <el-table-column label="操作" width="200" align="center">
        <template slot-scope="scope">
          <el-button size="mini" @click="edit(scope.row)" type="text">编辑</el-button>
          <el-button @click="handledelete(scope.row)" type="text" size="mini">删除</el-button>
          <!-- <el-button
            size="mini"
            @click="handleClick(scope.row)"
            v-if="scope.row.status===0"
            type="text"
          >启用</el-button>
          <el-button
            size="mini"
            @click="handleClick(scope.row)"
            v-if="scope.row.status===1"
            type="text"
          >停用</el-button>-->
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="规则信息" :visible.sync="dialogVisible" width="33%">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px">
        <el-form-item label="等级名称" prop="gradelevelName">
          <el-input v-model="ruleForm.gradelevelName"></el-input>
        </el-form-item>
        <!-- <el-form-item label="等级编码" prop="gradelevelCode">
          <el-input v-model="ruleForm.gradelevelCode"></el-input>
        </el-form-item>-->
        <!-- <el-form-item label="状态" prop="status">
          <el-select v-model="ruleForm.status">
            <el-option label="禁用" value="0"></el-option>
            <el-option label="启用" value="1"></el-option>
          </el-select>
        </el-form-item>-->
        <el-form-item label="积分限值">
          <el-input
            v-model="ruleForm.beginScore"
            style="width:40%"
            onkeyup="this.value=this.value.replace(/[^\d.]/g,'');"
            maxlength="7"
          ></el-input>-
          <el-input
            v-model="ruleForm.endScore"
            @blur="blurscore()"
            style="width:40%"
            onkeyup="this.value=this.value.replace(/[^\d.]/g,'');"
            maxlength="7"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="confirmEdit()" size="small">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="提示" :visible.sync="dialogVisibleone" width="30%">
      <span>确认删除？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleone = false" size="small">取 消</el-button>
        <el-button type="primary" @click="sure()" size="small">确 定</el-button>
      </span>
    </el-dialog>
    <div class="block" style="margin-top:2px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30, 50, 100]"
        :current-page="listQuery.current"
        :page-size="listQuery.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import {
  getmemberrule,
  addmemberrule,
  upmemberrule,
  delmemberrule,
  usebutton
} from "@/api/shopgrade";
import qs from "qs";
export default {
  data() {
    return {
      loading: true,
      listQuery: {
        current: 1,
        size: 10
      },
      tableData: [],
      total: 0,
      formInline: {
        // gradelevelCode: "",
        gradelevelName: ""
      },
      data5: [],
      data3: [],
      data4: [],
      defaultProps: {
        children: "sub",
        label: "name"
      },
      objone: {},

      multipleSelection: [],
      radio: "",
      rolefenid: "",
      selected: {},
      ruleForm: {
        gradelevelName: "",
        // gradelevelCode: "",
        gradelevelId: "",
        // status: "",
        createUser: "",
        updateUser: "",
        beginScore: "",
        endScore: ""
      },
      uuid: "",
      roleid: "",
      dialogVisibleone: false,
      dialogVisibletwo: false,
      dialogVisible: false,
      ruledata: [],

      rules: {
        gradelevelName: [
          { required: true, message: "请输入等级名称", trigger: "blur" }
        ]
        // gradelevelCode: [
        //   { required: true, message: "请输入等级编码", trigger: "blur" }
        // ],
        // status: [{ required: true, message: "请选择状态", trigger: "blur" }]
      }
    };
  },
  mounted() {
    this._getmemberinfo();
  },
  methods: {
    blurscore() {
      if (this.ruleForm.endScore < this.ruleForm.beginScore) {
        this.$message.error("开始分值不能大于结束分值");
      }
    },
    kong() {
      //   this.formInline.gradelevelCode = "";
      this.formInline.gradelevelName = "";
    },
    search() {
      let data = {
        size: this.listQuery.size,
        current: 1,
        condition: { gradelevelName: this.formInline.gradelevelName },
        ascs: [],
        descs: []
      };

      getmemberrule(data).then(res => {
        this.tableData = res.records;
        this.tableData.gradeLevel = parseInt(res.records.gradeLevel);
        this.total = res.total;
        console.log(res, "ppe");
      });
    },
    // handleClick(v) {
    //   if (v.status === 0) {
    //     var uuid = 1;
    //   } else if (v.status === 1) {
    //     var uuid = 0;
    //   }
    //   let data = { uuid: v.uuid, status: uuid };
    //   usebutton(qs.stringify(data)).then(res => {
    //     this.$message({
    //       showClose: true,
    //       message: res.message,
    //       type: "success"
    //     });
    //     this._getmemberinfo();
    //   });
    // },
    handledelete(v) {
      let data = {
        uuid: v.uuid
      };
      this.$confirm("确认删除吗？").then(_ => {
        delmemberrule(data).then(res => {
          this.$message({
            showClose: true,
            message: "删除成功",
            type: "success"
          });
          this._getmemberinfo();
        });
      });
    },

    add() {
      this.dialogVisible = !this.dialogVisible;
      this.editflag = false;
    },
    edit(v) {
      console.log(v, "pp");
      this.ruleForm.gradelevelName = v.gradelevelName;
      //   this.ruleForm.status = String(v.status);

      //   this.ruleForm.gradelevelCode = v.gradelevelCode;

      this.ruleForm.gradelevelId = v.gradelevelId;
      this.ruleForm.createUser = v.createUser;
      this.ruleForm.updateUser = v.updateUser;
      this.ruleForm.endScore = v.endScore;
      this.ruleForm.beginScore = v.beginScore;

      this.dialogVisible = !this.dialogVisible;
      this.editflag = true;
      this.uuid = v.uuid;
    },
    confirmEdit(v) {
      console.log(v, "ff");
      if (
        this.ruleForm.gradelevelName == "" ||
        this.ruleForm.gradelevelName == null
      ) {
        this.$message.error("请输入等级名称");
        return;
      }
      if (this.ruleForm.beginScore == "" || this.ruleForm.endScore == "") {
        this.$message.error("请输入积分限值");
        return;
      }
      if (this.ruleForm.endScore < this.ruleForm.beginScore) {
        this.$message.error("开始分值不能大于结束分值");
        return;
      }
      //   if (
      //     this.ruleForm.gradelevelCode == "" ||
      //     this.ruleForm.gradelevelCode == null
      //   ) {
      //     this.$message.error("请输入等级编码");
      //     return;
      //   }

      //   if (this.ruleForm.status == "" || this.ruleForm.status == null) {
      //     this.$message.error("请选择状态");
      //     return;
      //   }
      if (this.editflag) {
        var userId = localStorage.getItem("userId");
        let data = {
          uuid: this.uuid,
          gradelevelName: this.ruleForm.gradelevelName,
          //   status: this.ruleForm.status,
          //   gradelevelCode: this.ruleForm.gradelevelCode,
          gradelevelId: this.ruleForm.gradelevelId,
          createUser: this.ruleForm.createUser,
          updateUser: this.ruleForm.updateUser,
          endScore: this.ruleForm.endScore,
          beginScore: this.ruleForm.beginScore
        };
        upmemberrule(data).then(res => {
          this.dialogVisible = !this.dialogVisible;
          this.$message({
            showClose: true,
            message: "修改成功",
            type: "success"
          });
          this._getmemberinfo();
        });
      } else {
        let data = {
          gradelevelName: this.ruleForm.gradelevelName,
          //   status: this.ruleForm.status,
          //   gradelevelCode: this.ruleForm.gradelevelCode,
          gradelevelId: this.ruleForm.gradelevelId,
          createUser: this.ruleForm.createUser,
          updateUser: this.ruleForm.updateUser,
          endScore: this.ruleForm.endScore,
          beginScore: this.ruleForm.beginScore
        };
        addmemberrule(data).then(res => {
          this.dialogVisible = false;
          this.$message({
            showClose: true,
            message: "添加成功",
            type: "success"
          });
          this._getmemberinfo();
        });
      }
      //var u1 = "u1";
    },
    handleSizeChange(val) {
      this.listQuery.size = val;
      this.search();
    },
    handleCurrentChange(val) {
      this.listQuery.current = val;
      this.search();
    },
    _getmemberinfo() {
      let data = {
        size: this.listQuery.size,
        current: this.listQuery.current,
        condition: { gradelevelName: this.formInline.gradelevelName },
        ascs: [],
        descs: []
      };
      getmemberrule(data).then(res => {
        this.loading = false;
        this.tableData = res.records;
        this.tableData.gradeLevel = parseInt(res.records.gradeLevel);
        this.total = res.total;
        console.log(res, "ppe");
      });
    }
  }
};
</script>
<style  lang="less" scoped>
.toptitle {
  border: 1px solid #e0e0e0;
  border-bottom: 2px solid #188097;
  background: #f5f5f5;
  line-height: 35px;
  margin-bottom: 10px;
  padding: 0 10px;
  font-size: 14px;
  font-weight: bold;
}
.limttable {
  width: 500px;
  float: left;
}

.limttree {
  display: inline-block;

  border-top: 48px solid rgb(238, 241, 246);
  width: 206px;
  margin-left: 150px;
}

.toptitle {
  border: 1px solid #e0e0e0;
  border-bottom: 2px solid #188097;
  background: #f5f5f5;
  line-height: 35px;
  margin-bottom: 10px;
  padding: 0 10px;
  font-size: 14px;
  font-weight: bold;
}
.limttreecontain {
  height: 260px;
  width: 200px;
  overflow: scroll;
  border: 1px solid #ccc;
}
.demo-form-inline {
  //   border: 1px solid #ebeef5;
  padding: 20px 10px 3px 30px;
  margin-bottom: 25px;
}
</style>